<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3、AngularJS Scope(作用域)</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>


   <div>
       <p>Scope 是一个对象，有可用的方法和属性。</p>
       <p> Scope 可应用在视图和控制器上。</p>
   </div>
 <!--View-->
  <div ng-app="AppName">

      <div ng-controller="testController">
          <input ng-model="name">
          <h1>{{carname}}</h1>
          <button ng-click="adjustAppFunc('dddd')">按钮点击</button>
          <p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
      </div>

      <!--根作用域  所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。-->
      <div ng-controller="testControllerTwo">

          <h1>{{rootName}}的家族成员：</h1>
          <ul>
              <li ng-repeat="x in nameArray"> {{rootName}} {{x}}</li>
          </ul>

      </div>
  </div>

  <!--Controller-->
  <script>
       let  app = angular.module('AppName',[]);
       app.controller('testController',function ($scope) {
           $scope.name = '初始汽车人';
           $scope.adjustAppFunc = function (x) {
                $scope.carname = 'hello' + $scope.name + 'x的值' + x;
           }
       });
       app.controller('testControllerTwo',function ($scope, $rootScope) {
           $scope.nameArray = ['aa', 'bb', 'cc'];
           $rootScope.rootName = '子彬';
       });
  </script>

   <!--AngularJS 应用组成如下：-->
   <!--View(视图), 即 HTML。-->
   <!--Model(模型), 当前视图中可用的数据。-->
   <!--Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。-->

</body>
</html>